import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
type HeaderProps = {
    title: string;
    onBackPress?: () => void;
    rightIcon?: string;
    onRightPress?: () => void;
}

const Header: React.FC<HeaderProps> = ({ title, onBackPress, rightIcon, onRightPress }) => {
    return <View style={styles.container}>
        {onBackPress ? (<TouchableOpacity onPress={onBackPress} style={styles.iconContainer}>
            <Ionicons name="arrow-back" size={24} color="#333" ></Ionicons>
        </TouchableOpacity>) :
            (<View style={styles.iconPlaceholder}></View>)}
        <Text style={styles.title}>{title}</Text>
        {rightIcon ? (<TouchableOpacity onPress={onRightPress} style={styles.iconContainer}><Ionicons name={rightIcon as any} size={24} color={'#333'}></Ionicons></TouchableOpacity>) : (<View style={styles.iconPlaceholder}></View>)}

    </View>
};


const styles = StyleSheet.create({
    container: {
        height: 56,
        paddingHorizontal: 16,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBlockColor: '#eee',
    },
    title: {
        fontSize: 18,
        fontWeight: '600',
        color: '#333',
    },
    iconContainer: {
        width: 32,
        alignItems: 'center',

    },
    iconPlaceholder: {
        width: 32,
    }

})

export default Header;